<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" type="border-card" stretch>
        <el-form
                :model="formData"
                label-position="top"
                label-width="auto"
                :rules="rules"
                >
            <el-tab-pane label="操作权限" name="first">
                
                <div class="flow-operate-setting">
                    <el-row >
                        <el-col :span="6"><el-checkbox v-model="formData.button.commit" label="提交"  disabled/></el-col>
                        <el-col :span="18">
                            <el-form-item required>
                                <el-input v-model=" formData.button.commitText" ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6"><el-checkbox v-model="formData.button.reject" label="撤销" /></el-col>
                        <el-col :span="18">
                            <el-form-item required>
                                <el-input v-model=" formData.button.rejectText" ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6"><el-checkbox v-model="formData.button.cancel" label="取消" disabled /></el-col>
                        <el-col :span="18">
                            <el-form-item required>
                                <el-input v-model=" formData.button.cancelText" ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            
            </el-tab-pane>
            <el-tab-pane label="表单权限" name="second">表单权限</el-tab-pane>
            <el-tab-pane label="监听器" name="third">监听器</el-tab-pane>
            </el-form>
 </el-tabs>
</template>

<script setup>
   import {defineProps, defineExpose, toRefs,watch, ref, reactive} from 'vue';
   const props = defineProps({
       data:{},
   })
   const activeName = ref('first');

   const formData = reactive({
        button:{
            commit: true,
            commitText: '提交',
            cancel: true,
            cancelText: '取消',
            reject: true,
            rejectText: '撤销'
        }
   })

   const rules = ref({})

   const {data} = toRefs(props);
   watch(()=>data,(newv,oldv)=>{
       alert(newv);
   })

   Object.assign(formData, data.value.config);
    const formConfig = () => {
        return new Promise((resolve, reject) => {
            formData.value = "所有人";
            resolve(formData);
        });
    }

    defineExpose({
        formConfig
    })

  

</script>

<style  scoped>
    .flow-operate-setting{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        gap: 10px;
    }
</style>